<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <view class="item" @click="itemClick">
    <view class="img-box">
      <view class="img-tip" v-if="info.type === 'dou'">待付款商品</view>
      <img class="img" :src="info.img" alt="" />
    </view>
    <view class="content">
      <view class="boxwe">
        <view class="name">
          <text class="icon" v-if="info.type === 'dou'">D</text>
          <img class="kuai" v-if="info.type === 'kuai'" src="@/static/images/kuaishou.png" alt="" />

          <text>{{ info.title }}</text>
        </view>
        <view class="sun">
          剩余
          <text>{{ info.maxCount }}单</text>
        </view>
        <view class="desc">
          {{ info.desc }}
        </view>
      </view>
      <view class="other">
        <view class="price">
          <text class="p1">￥{{ info.discountPrice }}</text>
          <text class="p2">￥{{ info.price }}</text>
        </view>
        <view class="btn">
          <template v-if="info.type === 'dou'">
            <text>代付￥{{ info.pay || 0 }}</text>
            <text>切勿自付</text>
          </template>
          <template v-else>
            <text>先付￥{{ info.pay || 0 }}</text>
            <text>后返￥{{ info.back || 0 }}</text>
          </template>
        </view>
      </view>
    </view>
  </view>
  <wd-popup v-model="show" position="center" :custom-style="customStyle" @close="handleClose">
    <view class="popup-box">
      <view
        class="head"
        :style="{
          backgroundImage: `url(${info.img})`,
        }"
      >
        <view class="tip">仅支持本口令下单，禁止转链，私自进店铺拍单，违者永久封号</view>
      </view>
      <view class="po1">
        <template v-if="info.type === 'dou'">
          付款
          <text class="pr">￥{{ info.pay || 0 }}</text>
          元收货后返
          <text class="pr">￥{{ info.back || 0 }}</text>
          元
        </template>
        <template v-else>
          客单
          <text class="pr">￥{{ info.pay || 0 }}</text>
          ，无需本人支付，选支付宝好友代付，提交口令即可
        </template>
      </view>
      <view class="po2">
        <wd-icon name="warning" size="20px"></wd-icon>
        （明确商品标题与备注，再下单购买）
      </view>

      <view class="bottom" @click="copy">复制口令，打开快手购买</view>
      <view class="sb">购买须知</view>
    </view>
  </wd-popup>
  <wd-toast />
  <input type="text" id="textToCopy" value="" />
</template>

<script lang="ts" setup>
import { useToast, useMessage } from 'wot-design-uni'
import { useSysInfoStore } from '@/store/sysInfo'
import { getCmdUrl } from '@/service/product/index'

const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
})
const sysInfoStore = useSysInfoStore()

const customStyle = computed(() => {
  return `height: auto;width:${sysInfoStore.sysInfo.deviceType === 'pc' ? '40vw' : '80vw'};border-radius: 20rpx;`
})
const show = ref(false)
function itemClick() {
  show.value = true
}
function handleClose() {
  show.value = false
}
const toast = useToast()
const message = useMessage()
function copy() {
  handleClose()

  if (props.info.type === 'dou') {
    getCmdUrl({
      id: props.info.id,
    }).then((res) => {
      copyText('测试口令')
    })
    toast.show('复制口令，打开抖音购买')
  } else {
    copyText('测试口令')
    message
      .confirm({
        msg: '快手商品拍下，需复制订单号，认领订单才可',
        title: '提示',
        type: 'confirm',
        confirmButtonText: '我知道了',
      })
      .then(() => {
        toast.show('复制口令，打开快手购买')
      })
  }
}

async function copyText(text: string) {
  // 优先尝试使用 Clipboard API
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text)
      alert('文本已复制到剪贴板')
      return
    } catch (err) {
      console.error('使用 Clipboard API 复制失败:', err)
    }
  }

  // 如果 Clipboard API 不可用，使用 document.execCommand()
  const textarea = document.createElement('textarea')
  textarea.value = text
  textarea.style.position = 'fixed'
  textarea.style.opacity = '0'
  document.body.appendChild(textarea)
  textarea.select()
  try {
    const successful = document.execCommand('copy')
    if (successful) {
      alert('文本已复制到剪贴板')
    } else {
      console.error('使用 document.execCommand() 复制失败')
    }
  } catch (err) {
    console.error('使用 document.execCommand() 复制时出错:', err)
  }
  document.body.removeChild(textarea)
}
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
  display: flex;
  padding: 10rpx;
  background: white;
  margin-bottom: 10px;
  border-radius: 10rpx;
  overflow: hidden;
  .img-box {
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;
    .img-tip {
      position: absolute;
      top: 2px;
      left: 0;
      width: 100%;
      text-align: center;
      color: #ff4566;
      font-size: 32rpx;
      font-weight: 600;
    }
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    flex: 1;
    padding-left: 10rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .boxwe {
      flex: 1;
    }
    .name {
      width: 100%;
      color: black;
      font-size: 28rpx;
      font-weight: bold;
      letter-spacing: 1px;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      .icon {
        flex: none;
        display: inline-block;
        height: 28rpx;
        width: 28rpx;
        text-align: center;
        line-height: 28rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        color: white;
        background: black;
        border-radius: 6rpx;
        margin-right: 10rpx;
      }
      .kuai {
        height: 28rpx;
        width: 28rpx;
      }
      text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .sun {
      color: #333;
      font-size: 28rpx;
      text {
        color: #ff4043;
      }
    }
    .desc {
      color: #ff4043;
      font-size: 24rpx;
    }
    .other {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .price {
        display: inline-flex;
        align-items: baseline;
        .p1 {
          font-size: 36rpx;
          font-weight: bold;
          color: #ff2e4f;
        }
        .p2 {
          padding-left: 0;
          font-size: 24rpx;
          text-decoration: line-through;
          color: #999999;
        }
      }

      .btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10rpx 30rpx;
        border-radius: 20rpx;
        color: white;
        font-size: 24rpx;
        background: linear-gradient(#ff7269, #ff2d54);
      }
    }
  }
}

.popup-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  .sb {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    padding: 10rpx 60rpx;
    color: #ba6208;
    font-size: 32rpx;
    font-weight: bold;
    letter-spacing: 2px;
    background: linear-gradient(#fec54b, #fbe5bb);
    border-radius: 0 0 20px 0;
  }

  .head {
    height: 600rpx;
    width: calc(100% - 40rpx);
    box-sizing: border-box;
    margin: 20rpx;

    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    .tip {
      position: absolute;
      bottom: 1%;
      left: 0;
      right: 0;
      color: #ff0000;
      padding-left: 10px;
      font-size: 30rpx;
      font-weight: bold;
      line-height: 1.7;
    }
  }
  .po1 {
    margin: 10rpx 0;
    text-align: center;
    color: black;
    font-weight: bold;
    font-size: 28rpx;
    .pr {
      color: #ff0000;
      padding: 0;
    }
  }
  .po2 {
    margin: 10rpx auto 20rpx;
    text-align: center;
    background: #fcf9da;
    color: #de6a1c;
    font-size: 24rpx;
    padding: 10rpx 0;
    border-radius: 20rpx;
    width: calc(100% - 40rpx);
  }
  .bottom {
    color: white;
    background: #ff6305;
    padding: 30rpx 0;
    text-align: center;
    font-size: 32rpx;
    letter-spacing: 2px;
  }
}
</style>
